<template>

  <div>

    <el-card>
      <!--顶层-->
      <!--任务数、各种统计，添加按钮-->
      <!--<el-button type="warning" size="mini" @click="">新增</el-button>-->
      <el-row>

        <el-col :span="5">
          <div class="birthdayHum">
            <span>今日计划数</span>
          </div>
          <div class="birthdayNum">
            <span style="color:#F76707">{{statistical.today}}</span>
          </div>
        </el-col>

        <el-col :span="5">
          <div class="birthdayHum">
            <span>已逾期数</span>
          </div>
          <div class="birthdayNum">
            <span style="color:#F76707">{{statistical.overdue}}</span>
          </div>
        </el-col>

        <el-col :span="5">
          <div class="birthdayHum">
            <span>计划总数</span>
          </div>
          <div class="birthdayNum">
            <span style="color:#36B64B">{{statistical.tool}}</span>
          </div>
        </el-col>

        <el-col :span="5">
          <div class="birthdayHum">
            <span>已完成数</span>
          </div>
          <div class="birthdayNum">
            <span style="color:#36B64B">{{statistical.completed}}</span>
          </div>
        </el-col>

        <el-col :span="4">
          <div class="birthdayHum">
            <span>已停止计划数</span>
          </div>
          <div class="birthdayNum">
            <span style="color:#36B64B">{{statistical.stop}}</span>
          </div>
        </el-col>

      </el-row>
    </el-card>

    <!--今日待办-->
    <el-card class="div-list-style">
      <div slot="header" class="clearfix">
        <span>今日计划</span>
      </div>

      <el-table
        :data="planToday"
        max-height="620px"
        height="620px"
        style="width: 100%">

        <el-table-column
          prop="name"
          label="计划名称"
        >
        </el-table-column>

        <el-table-column
          prop="details"
          label="详情"
        >
        </el-table-column>

        <el-table-column
          prop="type"
          label="计划类型"
        >
          <template slot-scope="scope">
            <el-tag type="warning" size="mini" v-if="scope.row.type === 10">固定任务</el-tag>
            <el-tag type="warning" size="mini" v-else-if="scope.row.type === 11">固定任务(精确到秒)</el-tag>
            <el-tag type="success" size="mini" v-else-if="scope.row.type === 20">循环任务(年)</el-tag>
            <el-tag type="success" size="mini" v-else-if="scope.row.type === 21">循环任务(月)</el-tag>
            <el-tag type="success" size="mini" v-else-if="scope.row.type === 22">循环任务(天)</el-tag>
            <el-tag type="success" size="mini" v-else-if="scope.row.type === 23">循循环任务(小时)</el-tag>
            <el-tag type="info" size="mini" v-else >-</el-tag>
          </template>
        </el-table-column>


        <el-table-column
          prop="importance"
          label="重要性"
        >
          <template slot-scope="scope">
            <el-tag type="danger" size="mini" v-if="scope.row.importance === 0">核心</el-tag>
            <el-tag type="warning" size="mini" v-else-if="scope.row.importance === 1">重要紧急</el-tag>
            <el-tag size="mini" v-else-if="scope.row.importance === 2">不重要但紧急</el-tag>
            <el-tag size="mini" v-else-if="scope.row.importance === 3">重要但不紧急</el-tag>
            <el-tag type="info" size="mini" v-else >不重要不紧急</el-tag>
          </template>
        </el-table-column>

        <!--<el-table-column-->
        <!--  prop="startTime"-->
        <!--  label="开始时间"-->
        <!--&gt;-->
        <!--</el-table-column>-->

        <!--<el-table-column-->
        <!--  prop="executeLastTime"-->
        <!--  label="最近一次执行"-->
        <!--&gt;-->
        <!--</el-table-column>-->

        <el-table-column
          prop="classify"
          label="分类"
        >
          <template slot-scope="scope">
            <el-tag type="danger" size="mini" v-if="scope.row.classify === 1">个人</el-tag>
            <el-tag type="warning" size="mini" v-else-if="scope.row.classify === 2">家庭</el-tag>
            <el-tag size="mini" v-else-if="scope.row.classify === 3">工作</el-tag>
            <el-tag type="info" size="mini" v-else >-</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="cycle"
          label="周期"
        >
          <template slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.type === 10">{{scope.row.cycle}} / 次</el-tag>
            <el-tag size="mini" v-else-if="scope.row.type === 11">{{scope.row.cycle}} / 次</el-tag>
            <el-tag size="mini" v-else-if="scope.row.type === 20">{{scope.row.cycle}} 年 / 次</el-tag>
            <el-tag size="mini" v-else-if="scope.row.type === 21">{{scope.row.cycle}} 月 / 次</el-tag>
            <el-tag size="mini" v-else-if="scope.row.type === 22">{{scope.row.cycle}} 天 / 次</el-tag>
            <el-tag size="mini" v-else-if="scope.row.type === 23">{{scope.row.cycle}} 小时 / 次</el-tag>
            <el-tag size="mini" v-else >-</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="advance"
          label="提前提醒"
        >
          <template slot-scope="scope">
            <span>{{scope.row.advance}} / 天</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="finish"
          label="是否完成"
        >
          <template slot-scope="scope">
            <el-tag type="info" size="mini" v-if="scope.row.finish === 10">未完成</el-tag>
            <el-tag type="warning" size="mini" v-else-if="scope.row.finish === 11">未完成逾期</el-tag>
            <el-tag type="success" size="mini" v-else-if="scope.row.finish === 12">进行中</el-tag>
            <el-tag type="success" size="mini" v-else-if="scope.row.finish === 20">任务完成</el-tag>
            <el-tag  size="mini" v-else-if="scope.row.finish === 21">已完成逾期</el-tag>
            <el-tag type="danger" size="mini" v-else >任务停止</el-tag>
          </template>
        </el-table-column>


        <el-table-column
          fixed="right"
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button @click="toPlanDetailed(scope.row)" type="text" size="small"><i class="el-icon-view"></i>查看</el-button>
            <el-button @click="toOpenHistory(scope.row)" type="text" size="small"><i class="el-icon-view"></i>执行记录</el-button>
            <el-button @click="planComplete(scope.row)" type="text" size="small"><i class="el-icon-check"></i>完成一次计划</el-button>
            <el-button @click="stopPlanTips(scope.row)" type="text" size="small"><i class="el-icon-stopwatch"></i>终止计划</el-button>
            <el-button @click="delPlanByIdTips(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除计划</el-button>
          </template>
        </el-table-column>

      </el-table>

    </el-card>

    <!--执行记录-->
    <PlanHistory ref="PlanHistoryRef"/>
    <PlanDetailed ref="PlanDetailedRef"/>
  </div>

</template>

<script>

  import http from '@/utils/http'
  import PlanHistory from "./PlanHistory";
  import PlanDetailed from "./PlanDetailed";

  export default {
    name: "PlanToday",
    components: {
      PlanHistory,
      PlanDetailed,
    },
    data(){
      return {
        // 统计数据
        statistical: {
          today: 0,
          overdue: 0,
          tool: 0,
          completed: 0,
          stop: 0,
        },
        // 今日待办
        planToday: [],
      }
    },
    methods: {
      /**
       * 打开历史记录信息
       * @param row 当前行数据
       */
      toOpenHistory(row){
        this.$refs.PlanHistoryRef.openPlanHistoryPage(row.id)
      },
      /**
       * 打开详情页面
       * @param row
       */
      toPlanDetailed(row){
        this.$refs.PlanDetailedRef.openPlanDetailedPage(row)
      },
      /**
       * 完成一次计划
       */
      planComplete(row){
        http.post("/plan/planComplete", {
          id: row.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.getTodayTask()
          this.$message.success("完成一次计划");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 删除前的提示
       * @param row 当前行数据
       */
      delPlanByIdTips(row){
        this.$confirm('是否删除该计划?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.delPlanById(row)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 根据计划ID删除计划以及执行历史记录
       * @param row 当前行数据
       */
      delPlanById(row){
        http.post("/plan/delPlanById", {
          id: row.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.getTodayTask()
          this.$message.success("删除成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 终止计划 提示
       */
      stopPlanTips(row){
        this.$confirm('是否终止该计划?', '提示', {
          confirmButtonText: '确定终止',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.stopPlan(row)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 终止计划
       */
      stopPlan(row){
        http.post("/plan/stopPlan", {
          id: row.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.getTodayTask()
          this.$message.success("终止计划成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 统计任务数据
       */
      getPlanStatisticalQuantity(){
        http.post("/plan/getPlanStatisticalQuantity", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.statistical = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 获取今天的待办任务，会考虑提前提醒的情况
       */
      getTodayTask(){
        http.get("/plan/getTodayTask", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.planToday = res.data.planList

        }).catch(error => {
          this.$message.error(error.message);
        })

        this.getPlanStatisticalQuantity()
      },
    },
    mounted(){
      this.getTodayTask()
    }
  }
</script>

<style scoped>

  .div-list-style {
    margin-top: 10px;
  }

  .birthdayHum {
    margin: 5px;
    font-weight: 400;
    font-size: 14px;
    color: #909399;
    text-align: center
  }

  .birthdayNum {
    /*margin: 5px;*/
    font-weight: 700;
    font-size: 23px;
    /*color: #909399;*/
    text-align: center
  }

  .birthdayNumHum {
    /*margin: 5px;*/
    /*font-weight: 700;*/
    font-size: 14px;
    /*color: #909399;*/
    /*text-align: center*/
  }

</style>
